<template>
  <div class="min-h-screen bg-gradient-to-br">
    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-8">

      <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 ">

        <!-- 左侧区域 (25%) -->
        <div class="lg:col-span-3 space-y-6 sticky lg:top-36 self-start max-h-[calc(100vh-5rem)] overflow-y-auto">
          <!-- 社区基本信息 -->
          <CommunityInfo
            :communityId="communityId"
            @join="handleJoinCommunity"
            @leave="handleLeaveCommunity"
          />
        </div>

        <!-- 中间区域 (50%) -->
        <div class="lg:col-span-6 space-y-6">
          <!-- 动态内容区域 -->
          <template v-if="activeTab === 'posts'">
            <PostList pageType="community" :communityId="communityId" />
          </template>
          <template v-else-if="activeTab === 'album'">
            <CommunityAlbum :communityId="communityId" />
          </template>
          <template v-else-if="activeTab === 'event'">
            <CommunityEvents :communityId="communityId" />
          </template>
          <template v-else-if="activeTab === 'announcement'">
            <CommunityAnnouncements :communityId="communityId" />
          </template>
        </div>

        <!-- 右侧区域 (25%) -->
        <div class="lg:col-span-3 space-y-6 sticky lg:top-36 self-start max-h-[calc(100vh-5rem)] overflow-y-auto">
          <!-- 成员列表 -->
          <CommunityMembers :communityId="communityId" />

          <!-- 相册&活动&帖子&公告 -->
          <CommunityQuickAccess
            :communityId="communityId"
            :badges="quickAccessBadges"
            :loading="quickAccessLoading"
            @item-click="handleQuickAccessClick"
          />
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import PostList from "@/components/PostList.vue";
import CommunityInfo from "@/components/CommunityInfo.vue";
import CommunityMembers from "@/components/CommunityMembers.vue";
import CommunityQuickAccess from "@/components/CommunityQuickAccess.vue";
import CommunityAlbum from "@/components/CommunityAlbum.vue";
import CommunityEvents from "@/components/CommunityEvents.vue";
import CommunityAnnouncements from "@/components/CommunityAnnouncements.vue";

export default {
  name: "CommunityHome",
      components: {
        PostList,
        CommunityInfo,
        CommunityMembers,
        CommunityQuickAccess,
        CommunityAlbum,
        CommunityEvents,
        CommunityAnnouncements
      },
  data() {
    return {
      communityId: null,
      quickAccessLoading: false,
      quickAccessBadges: {
        album: 0,
        event: 0,
        file: 0,
        announcement: 0
      },
      activeTab: 'posts' // 新增状态管理当前显示的内容
    };
  },
  created() {
    // 从路由query参数中获取社区ID，支持直接URL访问
    this.communityId = this.$route.query.id || this.$route.params.id || "default";
    console.log("社区首页 - 社区ID:", this.communityId);

    // 如果ID无效，可以重定向或显示错误
    if (!this.communityId || this.communityId === "default") {
      console.error("无效的社区ID");
      // 实际应用中可以重定向到社区列表页或其他处理
      // this.$router.push('/communities');
    }

    // 加载快捷访问数据
    this.loadQuickAccessData();
  },
  watch: {
    // 监听路由变化，更新社区ID
    "$route.query.id"(newId) {
      this.communityId = newId || this.$route.params.id || "default";
      console.log("路由变化 - 社区ID:", this.communityId);
      this.loadQuickAccessData();
    }
  },
  methods: {
    // 加载快捷访问数据
    loadQuickAccessData() {
      // 设置加载状态
      this.quickAccessLoading = true;

      // 模拟网络请求延迟
      setTimeout(() => {
        // 模拟从服务器获取的数据
        this.quickAccessBadges = {
          album: Math.floor(Math.random() * 10),      // 0-9张新相片
          event: Math.floor(Math.random() * 5),       // 0-4个新活动
          file: Math.floor(Math.random() * 15),       // 0-14个新文件
          announcement: Math.floor(Math.random() * 3) // 0-2条新公告
        };

        // 关闭加载状态
        this.quickAccessLoading = false;
      }, 1500); // 1.5秒延迟模拟网络请求
    },

    // 处理加入社区事件
    handleJoinCommunity(communityId) {
      console.log(`加入社区: ${communityId}`);
      // 实际应用中应该调用API来加入社区

      // 如果项目中已安装toast通知组件，可以使用如下代码：
      // this.$toast.success('成功加入社区！');

      // 如果没有toast组件，可以使用alert或其他方式提示
      alert("成功加入社区！");
    },

    // 处理退出社区事件
    handleLeaveCommunity(communityId) {
      console.log(`退出社区: ${communityId}`);
      // 实际应用中应该调用API来退出社区

      // 如果项目中已安装toast通知组件，可以使用如下代码：
      // this.$toast.info('已退出社区');

      // 如果没有toast组件，可以使用alert或其他方式提示
      alert("已退出社区");
    },

    // 处理四宫格快捷访问点击事件
    handleQuickAccessClick({ type, communityId }) {
      console.log(`点击了${type}，社区ID: ${communityId}`);

      // 根据类型切换中间区域内容
      switch (type) {
        case "album":
          this.activeTab = 'album';
          break;
        case "event":
          this.activeTab = 'event';
          break;
        case "post":
          this.activeTab = 'posts';
          break;
        case "announcement":
          this.activeTab = 'announcement';
          break;
      }
    }
  }
};
</script>

<style scoped>

</style>